<template>
    <div class="Register">
       <div class="logo">
           <a href="/" >
               <img :src="require('../../static/images/logo.png')">
           </a>
       </div>
        <div class="item">
            <h1>
                註冊
            </h1>
            <div class="labels">
                <label>
                    <span>用戶名稱 </span><input type="text" name="" v-model="userName" maxlength="15">
                    <div class="errorTip" v-if="errorTip1" id="1">
                     {{msg1}} 
                     </div>
                </label>
                <label>
                    <span>密碼</span> <input type="password" name="" placeholder="" v-model="password" input="check" maxlength="16" 
                    >
                    <div class="errorTip" v-if="errorTip2" >
                     {{msg2}} 
                    </div>
                </label>
                 <label>
                    <span>密碼確認 </span><input type="password" name="" v-model="password2" input="check" maxlength="16">
                    <div class="errorTip" v-if="errorTip3">
                        {{msg3}} 
                    </div>
                </label>
                <label class="phone-number">
                    <span>手機號 </span>
                    <input type="number" placeholder="僅支持中國澳門地區"  @input="check" v-model="phoneNum" maxlength="8">
                    <div class="errorTip" v-if="errorTip4">
                       {{msg4}}    
                   </div>
                </label>
                <label class="code">
                    <span>驗證碼 </span>
                    <input type="number" placeholder=""  @input="check" v-model="code" >
                    <input type="button" :v-canSend ="canSend" id="codeBtn" @click="getCode" :value="msgCode" :id="canSend?'codeBtn':'codeBtnNo'">
                        <!-- {{}} -->
                    <!-- </div> -->
                    <div class="errorTip" v-if="errorTip5">
                        {{msg5}}   
                    </div>
                </label>
            </div>
           <!--  <div class="text">
                <div class="onOff">
                    <img :src="require('../../static/images/dagou_on.png')">
                </div>

                我已接受
                <router-link to="/">
                    註冊條紋
                </router-link>
            </div> -->
            <div class="register-btn">
                <a>
                    <el-button
                    plain
                    @click="register"
                    >
                    註冊
                    </el-button>
                </a>
            </div>
            <div class="text2">
                已有賬號？
                <router-link to="/">
                    立即登錄
                </router-link>
            </div>
        </div>
        <div class="success" style="display: none">
           <p>
               注册成功
           </p>
           <p>
               <router-link to="/">
                    立即跳转
               </router-link>
        </p>
        </div>
    </div>

</template>

<script>
    import {V1_CODE_MOBILE_TYPE,V1_USER_REGISTER,V1_USER_LOGIN}  from '../config/api'
    import md5 from 'js-md5';
    import $ from "../../static/js/jquery.min"

    export default {
     components:{

     },
     computed:{
        // canSend() {
        //         return 60 - this.count <= 0;
        //     },
     },
     data(){
       return{
        errorTip1:false,
        errorTip2:false,
        errorTip3:false,
        errorTip4:false,
        errorTip5:false,
        msg1:"",
        msg2:"",
        msg3:"",
        msg4:"",
        msg5:"",
        msgCode:"獲取驗證碼",
        userName:"",
        password:"",
        password2:"",
        phoneNum:"",
        code:"",
        code2:"",
        count:120,
        canSend:true,
    }
},
activated(){ 
    this.$store.commit("IS_SHOW_ALERT",false);
      
},  

methods:{
    open3() {
        this.$notify({
          title: '註冊成功',
          message: '點擊登錄即可評論',
          type: 'success'
      });
    },
    check(){
            this.phoneNum=this.phoneNum.slice(0, 8);
            //判斷用戶名
            if (this.userName.length==0) {
                this.errorTip1=true;
                this.msg1="用戶名不能為空";
                return false;
            }else{
             this.errorTip1=false;
            }
            //判断密码
            if(this.password.length ==0) {
                this.errorTip2=true;
                this.msg2="密碼不能為空";
                return false;
            }else{
                // if(/^[a-zA-Z\d]{8,16}$/.test(this.password)) {
                //     this.errorTip2=false;
                // }else{
                //     this.errorTip2=true;
                //     this.msg2="密碼需要數字与字母的組合";
                //     return false;
                // }
                
            }
            //判断第二次密码
            if(this.password==this.password2){
                this.errorTip3=false;
            }else{
                this.errorTip3=true;
                this.msg3="兩次輸入的密碼不一致"
            }
            //判斷手機號碼
            if(this.phoneNum.length >= 8) {
                this.phoneNum=this.phoneNum.slice(0, 8);
            };
            if(this.phoneNum.length==0){
                this.errorTip4=true;
                this.msg4="手机號碼不能為空";
                return false;
            }else{
                let reg=/^[6][0-9]{7}/;
                if (reg.test(this.phoneNum)) {
                    this.errorTip4=false;
                }else{
                    this.errorTip4=true;
                    this.msg4="請輸入澳門號碼";
                    return false;
                };
            }
            //判斷驗證碼
            if(this.code.length >= 4) {
                this.code=this.code.slice(0, 4);
            }
            if (this.code.length==0) {
                this.errorTip5=true;
                this.msg5="請輸入驗證碼"
                return false;
            }else{
                this.errorTip5=false;
            }
            return true;
        },
        getCode(){

             //獲取驗證碼
            if(this.phoneNum.length==0){
                this.errorTip4=true;
                this.msg4="請輸入澳門號碼";
            }else{
                let reg=/^[6][0-9]{7}/;
                if (reg.test(this.phoneNum)) {
                    if(this.canSend){
                        // $("#getCode").prop("disabled", true); 
                        //验证码倒计时
                        let interval = setInterval(() => {
                            this.count--;
                            this.msgCode="剩余"+this.count+"秒";
                            this.canSend=false;
                            if(this.count <= 0) {
                                 // $("#getCode").prop("disabled", false); 
                                clearInterval(interval);
                                this.msgCode="獲取驗證碼";
                                this.count=120;
                                this.canSend=true;
                            }
                        }, 1000);
                        //发送请求
                        this.$http.get(V1_CODE_MOBILE_TYPE+this.phoneNum+"/"+0).then(res => {
                             if(res.data.success){
                                // todo=>判断验证码是否正确
                                // this.code2=1234;
                                this.$alert('驗證碼已發到您的手機上', '請查收', {
                                    confirmButtonText: '确定',
                                });
                                this.canSend=false;
                            }else{
                                this.$alert(res.data.msg, '請重新輸入', {
                                    confirmButtonText: '确定',
                                });
                                clearInterval(interval);
                                this.count=120;
                            }
                        })
                        this.errorTip4=false;
                    }else{
                        this.$alert('不能重复发送验证码', {
                            confirmButtonText: '确定',
                        });
                    }
                    
                }else{
                    this.errorTip4=true;
                    this.msg4="請輸入澳門號碼";
                };
            }
        },
        register(){
            if(this.check()){
                this.$http.post(V1_USER_REGISTER,{
                    "mobile":this.phoneNum,
                    "code":this.code,
                    "password":md5(this.password),
                    "user_nickname":this.userName,
                }).then(res=>{
                    if(res.data.success){
                        this.$http.get(V1_USER_LOGIN+this.phoneNum+"/"+md5(this.password),{
                        }).then(res=>{
                            if(res.data.success){
                                this.$store.commit("USER_PROFILE",res.data.infor[0])
                                // this.$router.push({
                                //     "query":{
                                //         "login":true,
                                //     }
                                // });
                                this.$router.go(-1);
                            }
                        })
                        
                    }else{
                        this.$alert(res.data.msg, '請重新輸入', {
                            confirmButtonText: '确定',
                        });
                    }
                })
            }
        }
    },
    mounted(){ 

    },
}
</script>
<style lang="scss">
    @import "../style/Register";
</style>